<!--
 * @Author: your name
 * @Date: 2020-09-01 11:26:12
 * @LastEditTime: 2020-09-03 17:53:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \admin-management\web\src\views\system\menu-dialog.vue
-->

<template>
  <CustomDialog v-model:visible="visibleDialog" @confirm="handleOk">
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
      <template v-for="item in categoryForm" :key="item.key">
        <a-form-item :label="item.label" v-if="item.key === 'parent_id'">
          <a-tree-select
            v-model:value="data.record[item.key]"
            style="width: 100%"
            :tree-data="treeData"
            showSearch
            search-placeholder="Please select"
            :replaceFields="replaceFields"
            treeNodeFilterProp="title"
          />
        </a-form-item>
        <FormItem v-else :data="data.record" :item="item" />
      </template>
    </a-form>
  </CustomDialog>
</template>

<script>
import { computed, getCurrentInstance } from 'vue';
import CustomDialog from '../../../components/custom-dialog/index.vue';
import FormItem from '../../../components/form-item/index.vue';
export default {
  name: 'CategoryDialog',
  components: {
    CustomDialog,
    FormItem
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    allCategory: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit }) {
    let { ctx } = getCurrentInstance();
    console.log('props.allCategory :>> ', props.allCategory);
    let visibleDialog = computed({
      get: () => props.visible,
      set: (val) => {
        emit('update:visible', false);
      }
    });

    let categoryForm = [
      {
        label: '菜单名称',
        key: 'name',
        type: 1
      },
      {
        label: '图片',
        key: 'image',
        type: 1
      },
      {
        label: '父级菜单',
        key: 'parent_id',
        type: 1
      },
      {
        label: '排序',
        key: 'sort',
        type: 2
      }
    ];

    function handleOk() {
      if (props.data.isAdd) {
        saveAdd();
      } else {
        saveEdit();
      }
    }

    async function saveAdd() {
      let res = await ctx.$fetch.post('/goods.category/add', props.data.record);
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    async function saveEdit() {
      let res = await ctx.$fetch.post('/goods.category/edit', props.data.record);
      ctx.$message.success(res.msg);
      emit('refresh');
      emit('update:visible', false);
    }

    let replaceFields = {
      title: 'name',
      value: 'categroy_id',
      key: 'categroy_id',
      children: 'child'
    };

    let treeData = computed(() => {
      return [
        {
          name: '顶级分类',
          categroy_id: 0,
          child: []
        },
        ...props.allCategory
      ];
    });

    return {
      visibleDialog,
      categoryForm,
      handleOk,
      replaceFields,
      treeData
    };
  }
};
</script>
